<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="author" content="wangbo">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- <link rel="stylesheet" type="text/css" href=""/> -->
	<title> 虚拟dom </title>
</head>

<body>
	<div id="app">

	</div>
	<script type="text/javascript" src="../js/react.development.js">    </script>
	<script type="text/javascript" src="../js/react-dom.development.js">    </script>
	<script type="text/javascript" src="../js/prop-types.js">    </script>
	<script type="text/javascript" src="../js/babel.min.js">    </script>
	<script type="text/babel">
	/* 使用 key来刷新渲染的input的值 */
		class Test extends React.Component {
			constructor(props) {
				super(props);
				this.state = {
					name: 'yewenjun'
				};
			}

			flag =0;
			myClick=()=> {
				this.flag++;
				console.log(this.flag)
				this.setState({
					name: this.state.name === 'yewenjun' ? 'yewenhui' : 'yewenjun'
				})
			}

			render() {
				const {name} = this.state;
				return (
					<input  onClick={this.myClick} key={this.flag} type="text" defaultValue={name} />
				)
			}
		}
		ReactDOM.render(<Test   />, document.getElementById("app"));
	</script>
</body>

</html>